<template>
  <div>
    <!--  -->
    <el-dialog :title="dialogTitle" width="80%" top="10vh" :visible.sync="dialogVisible" :close-on-click-modal="false"
      class="dialog-wrap" @close="cancel">
      <el-steps :active="stepsActive" align-center finish-status="success" simple>
        <el-step title="数据表设置"></el-step>
        <el-step title="表单属性设置"></el-step>
        <el-step title="表单校验设置"></el-step>
        <el-step title="列表设置"></el-step>
      </el-steps>
      <div v-loading="tLoading" class="loading">
        <step-one v-if="this.stepsActive == 0" :formData="formData" @next="next" @cancel="cancel"></step-one>
        <step-two v-if="this.stepsActive == 1" :formData="formData" @next="next" @cancel="cancel" @last="last"></step-two>
        <step-tree v-if="this.stepsActive == 2" :formData="formData" @next="next" @cancel="cancel" @last="last"></step-tree>
        <step-four v-if="this.stepsActive == 3" :formData="formData" @next="next" @cancel="cancel" @last="last"></step-four>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import stepOne from './stepOne';
  import stepTwo from './stepTwo';
  import stepTree from './stepTree';
  import stepFour from './stepFour';

  import {
    add,
    view
  } from '@/api/adminPage/sysAutoCode';
  export default {
    name: 'autoCode',
    data() {
      return {
        dialogVisible: false,
        stepsActive: 0,
        dialogTitle: '创建',
        formData: undefined,
        tLoading: false
      };
    },
    components: {
      stepTwo,
      stepOne,
      stepTree,
      stepFour
    },
    computed: {},
    created() {
      this.resetTemp();
    },
    methods: {
      add() {
        this.dialogVisible = true;
        this.resetTemp();
        this.stepsActive = 0;
      },
      edit(id) {
        view(id).then(res => {
          this.stepsActive = 0;
          this.formData = res.result;
          this.dialogVisible = true;
        });
      },
      cancel() {
        //初始化一些属性
        this.dialogVisible = false;
      },
      next(formData) {
        let _this = this;
        this.formData = formData;
        this.tLoading = true;

        add(formData).then(res => {
          _this.formData = res.result;
          _this.tLoading = false;
          
          if (_this.stepsActive===3) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
          }
          if (_this.stepsActive < 3) {
            _this.stepsActive = _this.stepsActive + 1;
          }
        });
      },
      resetTemp() {
        this.formData = {
          packagePath: 'com.zcxy.sys',
          tableName: undefined,
          className: undefined,
          comment: undefined,
          relationTableDescribe: undefined,
          relationKey: undefined,
          relationType: undefined,
          id: undefined
        };
      },
      last() {
        this.stepsActive = this.stepsActive - 1;
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /* 禁用样式 */
  ::v-deep .el-input.is-disabled .el-input__inner,
  ::v-deep .el-textarea.is-disabled .el-input__inner {
    background-color: #eff2f7 !important;
    border: 1px solid #ced4da !important;
    color: #74788d !important;
    padding: 0 12px !important;

    &::-webkit-input-placeholder {
      color: #74788d !important;
    }
  }

  ::v-deep .dialog-footer {
    text-align: right;
  }

  .minWid {
    min-width: 108px;
  }

  .forms {
    padding-right: 0;
    max-height: calc(100vh - 360px);
  }

  .beforeBtn {
    float: left;
    line-height: 32px;
    color: #556de5;
    cursor: pointer;
  }

  .closeBtn {
    line-height: 32px;
    color: #73778d;
    cursor: pointer;
  }

  .title-h3 {
    font-weight: bold;

    span {
      padding-right: 10px;
      color: red;
    }
  }

  .loading {
    position: relative;
    margin-top: 5px;
    padding-top: 30px;
  }

  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label,
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label {
    &:after {
      content: '';
      margin-left: 0px;
    }

    &:before {
      content: '*';
      color: #f46a6a;
      margin-right: 4px;
    }
  }
</style>
